<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <style>
        .tree-table-icon {
            margin-right: 8px;
            cursor: pointer;
        }
        .tree-table-icon.open {
            transform: rotate(0deg);
            transition: transform .2s;
        }
        .tree-table-icon.close {
            transform: rotate(-90deg);
            transition: transform .2s;
        }
    </style>
</head>
<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">菜单名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" placeholder="请输入菜单名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="menu-query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="menu-table" lay-filter="menu-table"></table>
        </div>
    </div>

    <script type="text/html" id="menu-toolbar">
        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </script>

    <script type="text/html" id="menu-bar">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
    </script>

    <script>
        layui.use(['table', 'form', 'jquery', 'popup', 'tableTreeDj'], function() {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let popup = layui.popup;
            let tableTree = layui.tableTreeDj;

            // 定义局部函数
            const menuAdd = function() {
                layer.open({
                    type: 2,
                    title: '新增',
                    shade: 0.1,
                    area: ['80%', '90%'],
                    maxmin: true,
                    content: '/menu/add'
                });
            }

            const menuEdit = function(obj) {
                layer.open({
                    type: 2,
                    title: '修改',
                    shade: 0.1,
                    area: ['80%', '90%'],
                    maxmin: true,
                    content: '/menu/edit?id=' + obj.data['id']
                });
            }

            const remove = function(obj) {
                layer.confirm('确定要删除该菜单？', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    let loading = layer.load();
                    $.ajax({
                        url: "/api/menu/delete",
                        data: {id: obj.data['id']},
                        dataType: 'json',
                        type: 'delete',
                        success: function(result) {
                            layer.close(loading);
                            if (result.code == 0) {
                                popup.success(result.msg, function() {
                                    obj.del();
                                });
                            } else {
                                popup.failure(result.msg);
                            }
                        }
                    })
                });
            }

            const refresh = function() {
                table.reload('menu-table');
            }

            const batchRemove = function(obj) {
                let data = table.checkStatus(obj.config.id).data;
                if (data.length === 0) {
                    layer.msg("未选中数据", {
                        icon: 3,
                        time: 1000
                    });
                    return false;
                }
                let ids = data.map(item => item.id).join(',');
                layer.confirm('确定要删除这些菜单？', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    let loading = layer.load();
                    $.ajax({
                        url: "/api/menu/batchDelete/" + ids,
                        dataType: 'json',
                        type: 'delete',
                        success: function(result) {
                            layer.close(loading);
                            if (result.code == 0) {
                                popup.success(result.msg, function() {
                                    table.reload('menu-table');
                                });
                            } else {
                                popup.failure(result.msg);
                            }
                        }
                    })
                });
            }

            let cols = [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                },
                {
                    field: 'title',
                    title: '菜单名称',
                    minWidth: 200,
                     templet: function(d) {
                        return d.title;
                    }
                    // templet: function(d) {
                    //     return d.icon ? '<i class="' + d.icon + '"></i> ' + d.title : d.title;
                    // }
                },
                {
                    title: '图标',
                    field: 'icon',
                    align: 'center',
                    templet: function(d) {
                        return '<i class="' + d.icon + '"></i> ';
                    }
                },
                {
                    title: '类型',
                    field: 'type',
                    align: 'center',
                    templet: function(d) {
                        if (d.type == 0) {
                            return '<span class="layui-badge layui-bg-gray">目录</span>';
                        } else if (d.type == 1) {
                            return '<span class="layui-badge layui-bg-blue">菜单</span>';
                        } else {
                            return '<span class="layui-badge layui-bg-green">按钮</span>';
                        }
                    }
                },
                {
                    title: '路由地址',
                    field: 'path'
                },
                {
                    title: '权限标识',
                    field: 'permission'
                },
                {
                    title: '排序号',
                    field: 'sort',
                    align: 'center'
                },
                {
                    title: '状态',
                    field: 'status',
                    align: 'center',
                    templet: function(d) {
                        if (d.status == 1) {
                            return '<span class="layui-badge layui-bg-green">正常</span>';
                        } else {
                            return '<span class="layui-badge layui-bg-red">禁用</span>';
                        }
                    }
                },
                {
                    title: '创建时间',
                    field: 'create_time',
                    align: 'center'
                },
                {
                    title: '操作',
                    toolbar: '#menu-bar',
                    align: 'center',
                    width: 130
                }
                ]
            ]

            // 初始化表格
            function initTable(where) {
                // 表格配置
                const objTable = {
                    id: 'menu-table',
                    elem: '#menu-table',
                    url: '/api/menu/list',
                    where: where || {},
                    cols: cols,
                    skin: 'line',
                    toolbar: '#menu-toolbar',
                    response: {
                        statusCode: 0
                    },
                    done: function(res) {
                        if (res.code !== 0) {
                            layer.msg(res.msg || '加载失败', {icon: 2});
                        }
                    },
                    error: function(res) {
                        layer.msg('加载失败', {icon: 2});
                    },
                    defaultToolbar: [{
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh',
                    }, 'filter', 'print', 'exports']
                }

                const objTree = {
                    //defaultShow: true,
                    title: 'title',
                    title: 'title',
                    keyId: 'id',
                    keyPid: 'parent_id',
                    indent: '&nbsp;&nbsp;&nbsp;&nbsp;',
                    icon: {
                        open: 'layui-icon layui-icon-triangle-d', // 展开时候图标
                        close: 'layui-icon layui-icon-triangle-r', // 折叠时候图标
                    },
                    defaultShow: true
                    ,showCache: true //是否开启展开折叠缓存,默认不开启
                }


                tableTree.render(objTable,objTree);
            }

           

            // 初始化表格
            initTable();


            // $('#show').click(() => {
            //     tableTree.showAll(objTable);
            // });
            // $('#hide').click(() => {
            //     tableTree.hideAll(objTable);
            // });

            // 查询按钮点击事件
            form.on('submit(menu-query)', function(data) {
                initTable(data.field);
                return false;
            });

            // 重置按钮点击事件
            $('button[type="reset"]').click(function() {
                $('input[name="title"]').val('');
                initTable();
                return false;
            });

            table.on('tool(menu-table)', function(obj) {
                if (obj.event === 'remove') {
                    remove(obj);
                } else if (obj.event === 'edit') {
                    menuEdit(obj);
                }
            });

            table.on('toolbar(menu-table)', function(obj) {
                if (obj.event === 'add') {
                    menuAdd();
                } else if (obj.event === 'refresh') {
                    refresh();
                } else if (obj.event === 'batchRemove') {
                    batchRemove(obj);
                }
            });
        });
    </script>
</body>
</html> 